import React, { useContext, useEffect, useState } from 'react'
import {
  ConfigProviderSetting,
  ZoomLayout
} from '@zoom-design/zoom-design-demo'
import { Outlet, useLocation, useNavigate } from 'react-router'
import { pRoute } from '/@/wms/router/router-config.tsx'
import { ConfigProvider, Dropdown, theme } from 'antd'
import enUS from 'antd/locale/en_US'
import zhCN from 'antd/locale/zh_CN'
// import { SizeType } from 'antd/es/config-provider/SizeContext'
import I18n from '/@/wms/locale/locale.tsx'
import { Locale } from 'antd/es/locale'
import {
  GlobalOutlined,
  InfoCircleFilled,
  LogoutOutlined,
  UserOutlined
} from '@ant-design/icons'
import { GlobalContext, GlobalContextType } from '@zoom-design/zoom-design-demo'
import { AntdIcon, ThemeIcon } from '/@/wms/svg/SvgIcon.tsx'
import { ProSettings, SettingDrawer } from '@ant-design/pro-components'
import { SizeType } from 'antd/es/config-provider/SizeContext'
import RcQueueAnim from 'rc-queue-anim'

ConfigProviderSetting.install({
  componentSize: 'small',
  locale: enUS
})

const Layout: React.FC = () => {
  const { t, changeLanguage } = I18n.i18n
  const [locale, setLocal] = useState<Locale>(zhCN)
  const [localeStr, setLocalStr] = useState<string>('zh')
  const [size, setSize] = useState<SizeType>('middle')
  const navigate = useNavigate()
  const {pathname} = useLocation()
  const { token } = theme.useToken()
  const { themeX, setThemeX } = useContext<GlobalContextType>(GlobalContext)

  const [pathName, setPathName] = useState<string | undefined>(pathname)
  const [settings, setSetting] = useState<Partial<ProSettings> | undefined>({
    // fixSiderbar: true,
    layout: 'mix'
    // splitMenus: true,
  })
  const changeLanguageX = (value: string) => {
    console.log('lng', value)
    changeLanguage(value).then(() => {
      console.log(value)
      setLocal(value === 'en' ? enUS : zhCN)
      ConfigProviderSetting.install({
        componentSize: 'small',
        locale: value === 'en' ? enUS : zhCN
      })
      console.log(t)
    })
  }
  // const changeSize = (value: SizeType) => {
  //   console.log('size', value)
  //   setSize(value)
  //   ConfigProviderSetting.install({
  //     componentSize: value,
  //     locale: locale,
  //
  //   })
  // }
  // const context = useContext(ConfigContext)
  console.log(token.colorIcon)
  useEffect(() => {
    // console.log('context---->',context.locale)
    console.log('locale---->', locale)
    // context.locale = locale
    // console.log('config---->',ConfigProviderSetting.configProviderProps)
    ConfigProviderSetting.install({
      componentSize: 'small',
      locale: locale
    })
    console.log('config---->', ConfigProviderSetting)
  }, [locale])
  return (
    <>
      <ConfigProvider
        componentSize={size}
        locale={locale}
        theme={{
          algorithm:
            themeX === 'dark'
              ? [theme.darkAlgorithm, theme.compactAlgorithm]
              : [theme.defaultAlgorithm, theme.compactAlgorithm]
        }}
      >

        <ZoomLayout
          LayoutProps={{
            key: 'ly',
            title: t('中鼎集成'),
            logo: '/ZDlogo.svg',
            location: { pathname: pathName },
            menu: {
              collapsedShowTitle: true
            },
            route: pRoute(t),
            menuItemRender: (item: any, dom: any) => (
              <div
                onClick={() => {
                  console.log(dom)
                  console.log(item)
                  setPathName(item.itemPath)
                  navigate(item.itemPath)
                }}
              >
                {dom}
              </div>
            ),
            avatarProps: {
              src: '',
              icon: <UserOutlined style={{ color: token.colorIcon }} />,
              size: 'small',
              // title: 'admin',
              render: (_props: any, dom: any) => {
                return (
                  <Dropdown
                    menu={{
                      items: [
                        {
                          key: 'logout',
                          icon: <LogoutOutlined />,
                          label: '退出登录'
                        }
                      ]
                    }}
                  >
                    {dom}
                  </Dropdown>
                )
              }
            },
            actionsRender: (props: any) => {
              if (props.isMobile) return []
              if (typeof window === 'undefined') return []
              return [
                props.layout !== 'side' && document.body.clientWidth > 1400 ? (
                  <></>
                ) : undefined,
                <Dropdown
                  menu={{
                    items: [
                      {
                        key: 'small',
                        label: '小'
                      },
                      {
                        key: 'middle',
                        label: '中'
                      },
                      {
                        key: 'large',
                        label: '大'
                      }
                    ],
                    onClick: e => {
                      console.log(e)
                      setSize(e.key as SizeType)
                    },
                    selectedKeys: [size as string]
                  }}
                >
                  <AntdIcon component={InfoCircleFilled} />
                </Dropdown>,
                <Dropdown
                  menu={{
                    items: [
                      {
                        key: 'zh',
                        label: '中文'
                      },
                      {
                        key: 'en',
                        label: '英文'
                      }
                    ],
                    onClick: e => {
                      console.log(e)
                      setLocalStr(e.key)
                      changeLanguageX(e.key)
                    },
                    selectedKeys: [localeStr]
                  }}
                >
                  <AntdIcon component={GlobalOutlined} />
                </Dropdown>,
                <Dropdown
                  menu={{
                    items: [
                      {
                        key: 'dark',
                        label: '暗黑模式'
                      },
                      {
                        key: 'light',
                        label: '明亮模式'
                      }
                    ],
                    onClick: e => {
                      console.log(e)
                      setThemeX?.(e.key)
                    }
                  }}
                >
                  <ThemeIcon style={{ fontSize: 20 }} />
                </Dropdown>
                // <GithubFilled key="GithubFilled" style={{color: '#fff'}} />
              ]
            },
            ...settings
          }}
          ContainerProps={{
            key: 'con',
            content: (
              <>
                {/*<Select*/}
                {/*  style={{ width: 200 }}*/}
                {/*  defaultActiveFirstOption={true}*/}
                {/*  defaultValue={language}*/}
                {/*  onChange={changeLanguageX}*/}
                {/*  options={[*/}
                {/*    { value: 'zh', label: '中文' },*/}
                {/*    { value: 'en', label: 'English' }*/}
                {/*  ]}*/}
                {/*/>*/}
                {/*<Select*/}
                {/*  style={{ width: 200 }}*/}
                {/*  defaultActiveFirstOption={true}*/}
                {/*  defaultValue={'small'}*/}
                {/*  onChange={changeSize}*/}
                {/*  options={[*/}
                {/*    { value: 'small', label: t('小') },*/}
                {/*    { value: 'middle', label: t('中') },*/}
                {/*    { value: 'large', label: t('大') }*/}
                {/*  ]}*/}
                {/*/>*/}

                <Outlet key={'route'} />


                <SettingDrawer
                  pathname={pathName}
                  // enableDarkTheme
                  // getContainer={(e: any) => {
                  //   if (typeof window === 'undefined') return e;
                  //   return document.getElementById('test-pro-layout');
                  // }}
                  settings={settings}
                  onSettingChange={changeSetting => {
                    setSetting(changeSetting)
                  }}
                  disableUrlParams={true}
                />
              </>
            ),
            style: {
              // height: 'calc(100vh - 50px)',
              // width: 'calc(100vw - 150px)'
              // backgroundColor: token.colorBgContainer
            },
            token: {
              paddingInlinePageContainerContent: 5,
              ...token
            }
          }}
        ></ZoomLayout>
      </ConfigProvider>
    </>
  )
}

export default Layout
